<template>
  <div class="nav">
    <div class="nav-wrapper" ref="navWrapper">
      <ul class="nav-ul">
        <li class="nav-item" v-for="(item,index) in navs" :key="index"
            :style="{marginRight: marginPx + 'rem'}"
            :class="choosedId == index ? 'is-selected' : ''"
            @click="isActive(index)">{{item}}</li>
      </ul>
    </div>
  </div>

</template>

<script>
/* eslint-disable no-unused-vars */
import BScroll from 'better-scroll';

export default {
  name: 'NavBar',
  data() {
    return {
      // 选中的Id
      choosedId: 0,
    };
  },
  props: {
    navs: Array,
    marginPx: {
      type: String,
      default: '.555625',
    },
  },
  methods: {
    isActive(index) {
      console.log(`--isActive--${index}`);
      this.choosedId = index;
      this.$store.state.navStateIndex = this.choosedId;
    },
  },
  created() {
    this.$nextTick(() => {
      this.navScroll = new BScroll(this.$refs.navWrapper, {
        click: true,
        scrollX: true,
        eventPassthrough: 'vertical',
      });
    });
  },
};
</script>

<style scoped>
  .nav-wrapper {
    overflow: hidden;
    width: 100%;
  }
  ul{
    min-width: 108%;
    white-space: nowrap;
    margin: 0.3875rem 0.341rem 0rem 0.341rem;
  }
  .nav-item {
    display: inline-block;
    font-size: 0.68rem;
    min-width: 0.9rem;
    margin-left: 0.341rem;
    color: rgba(7, 17, 27, .8);
    height: 0.6rem;
  }
  .is-selected {
    color: #FE4070;
    padding-bottom: 0.45rem;
    border-bottom: 0.15rem solid #FE4070;
  }
</style>
